<template>
  <div :style="{ width: '100%', height: '100%' }">

<!--    <h3>message</h3>-->
    <div class="info-page">
      <div class="info-item" v-for="item in filteredData" :key="item.label">
        <span class="label">{{ item.label }}：</span>
        <span class="value">{{ item.value }}</span>
      </div>
      <div>
        <span></span>
      </div>
      <div>
        <span></span>
      </div>
      <div>
        <span style="color: green;font-weight: bold;font-size: 1.6rem;float: left;align-items: center;">{{ lastData }}</span>
      </div>

    </div>
  </div>
</template>


<script>

import { getLabelvalue } from '@/api/workorder/cpkdata'

export default {
  name: "DataPage",
  props: {
    tempId: {
      // type: String,
      required: true,
    },
  },
  data() {
    return {
      data: [
        { label: "总数", value: 0 },
        { label: "最大值", value: 0 },
        { label: "最小值", value: 0 },
        { label: "LSC", value: 0 },
        { label: "极差", value: 0 },
        { label: "CP", value: 0 },
        { label: "平均值", value: 0 },
        { label: "极差平均值", value: 0 },
        { label: "CPU", value: 0 },
        { label: "USL", value: 0 },
        { label: "标准差", value: 0 },
        { label: "控制线方式", value: 0 },
      ],
    };
  },
  mounted() {
    this.getData();
  },
  computed: {
    filteredData() {
      return this.data.slice(0, -1); // 返回除最后一项外的所有数据
    },
    lastData() {
      // 返回最后一项
      var datum = this.data[this.data.length - 1]
      var label = datum.label
      var value = datum.value
      return label+'：'+value;
    }
  },
  methods:{
    async getData(){
      const res = await getLabelvalue(this.tempId);
      this.data = res.data.data
      this.$emit('messageEvent', false);
    }
  }
};
</script>


<style scoped>
.info-page {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 10px;
  padding: 15px;
  background: transparent;
}

.info-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #ccc;
  padding: 1.4rem;
  background: rgba(255, 255, 255, 0.8); /* 半透明背景 */
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.label {
  //font-weight: bold;
  font-size: 1.0rem;
  color: #333;
}

.value {
  font-size: 1.2rem;
  color: #333;
}
</style>

